import React, { memo, ReactNode, useEffect, useRef, ElementRef } from 'react'
import { Carousel } from 'antd'
import { useAppDispatch } from '@/store'
import { useAppSelector, shallowEqualApp } from '@/store'
import { fetchNewAlbumAction } from '../../store/recommend'
import { AlbumWrapper } from './style'
import SectionHeaderV1 from '@/components/section-header-v1'
import AlbumItemV1 from '@/components/album-item-v1'

interface IProps {
  children?: ReactNode
}

type ToggleType = 'prev' | 'next'

const NewAlbum: React.FC<IProps> = () => {
  const { newAlbums } = useAppSelector(
    (state) => ({
      newAlbums: state.recommend.newAlbums
    }),
    shallowEqualApp
  )
  const dispatch = useAppDispatch()
  const bannerRef = useRef<ElementRef<typeof Carousel>>(null)
  useEffect(() => {
    dispatch(fetchNewAlbumAction())
  }, [])
  function handleToggle(type: ToggleType) {
    bannerRef.current && bannerRef.current[type]()
  }
  return (
    <AlbumWrapper>
      <SectionHeaderV1
        title="新碟上架"
        morePath="/discover/album"
      ></SectionHeaderV1>
      <div className="content">
        <button
          className="sprite_02 arrow arrow-left"
          onClick={() => handleToggle('prev')}
        ></button>
        <div className="banner">
          <Carousel ref={bannerRef} dots={false} speed={1200}>
            {[0, 1].map((item) => {
              return (
                <div key={item} className="album-box">
                  <div className="album-list" key={item}>
                    {newAlbums.slice(item * 5, (item + 1) * 5).map((album) => {
                      return (
                        <AlbumItemV1
                          key={album.id}
                          albumData={album}
                        ></AlbumItemV1>
                      )
                    })}
                  </div>
                </div>
              )
            })}
          </Carousel>
        </div>
        <button
          className="sprite_02 arrow arrow-right"
          onClick={() => handleToggle('next')}
        ></button>
      </div>
    </AlbumWrapper>
  )
}

export default memo(NewAlbum)
